import { View, Text, Button } from '@tarojs/components'
import { useLoad } from '@tarojs/taro'
import Taro from '@tarojs/taro'
import './index.less'

export default function Index () {
  useLoad(() => {
    console.log('Page loaded.')
  })

  const handleNavigateToList = () => {
    Taro.navigateTo({
      url: '/pages/list/index'
    })
  }

  const handleNavigateToTest = () => {
    Taro.navigateTo({
      url: '/pages/test/index'
    })
  }

  const handleNavigateToSimple = () => {
    Taro.navigateTo({
      url: '/pages/simple/index'
    })
  }

  return (
    <View className='index'>
      <View className="header">
        <Text className="title">Taro + Next.js 项目</Text>
        <Text className="subtitle">跨平台开发解决方案</Text>
      </View>

      <View className="content">
        <View className="feature-section">
          <Text className="section-title">功能特性</Text>
          <View className="feature-list">
            <Text className="feature-item">• 支持微信小程序</Text>
            <Text className="feature-item">• 支持Web端（Next.js）</Text>
            <Text className="feature-item">• TypeScript支持</Text>
            <Text className="feature-item">• 虚拟滚动列表</Text>
            <Text className="feature-item">• 瀑布流布局</Text>
          </View>
        </View>
      </View>

      <View className="actions">
        <Button
          className="action-btn primary"
          type="primary"
          onClick={handleNavigateToList}
        >
          虚拟滚动列表
        </Button>
        <Button
          className="action-btn secondary"
          onClick={handleNavigateToTest}
        >
          测试页面
        </Button>
        <Button
          className="action-btn secondary"
          onClick={handleNavigateToSimple}
        >
          简单测试
        </Button>
      </View>
    </View>
  )
}
